<template>
    <div>
        <!-- Sidebar begin -->
        <div class="Sidebar">
            <ul>
                <li>
                    <a class="active Sidebar-1">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-2">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-3">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-4">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-5">
                        <label>在线客服</label>
                    </a>
                </li>
            </ul>
        </div>
        <!-- Sidebar end -->

        <!-- home begin -->
        <div class="home-layout">
            <div class="main">
                <!-- first-floor  begin -->
                <div class="home-layout-A">
                    <div class="home-layout-A-left">
                        <div class="home-title-A">
                            热门服务
                            <a class="more">更多></a>
                        </div>
                        <div class="Popular-services">
                            <ul>
                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-WZRY.jpg">
                                        <p>王者荣耀</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-LOL.jpg">
                                        <p>英雄联盟</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-JDQS.jpg">
                                        <p>绝地求生</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-HAN.jpg">
                                        <p>逆水寒</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-BLZY.jpg">
                                        <p>堡垒之夜</p>
                                    </a>
                                </li>


                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-QJCJ.jpg">
                                        <p>全军出击</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-DT2.jpg">
                                        <p>刀塔2</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-CKXT.jpg">
                                        <p>刺客信条</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-MSZB.jpg">
                                        <p>魔兽争霸</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-JDQS.jpg">
                                        <p>绝地求生</p>
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-MSSJ.jpg">
                                        <p>魔兽世界</p>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <img src="../assets/img/home/home-hot-HYQS.jpg">
                                        <p>荒野行动</p>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="home-layout-A-right">
                        <div class="home-title-B">
                            一起玩过
                        <ul>
                            <li><a class="left"></a></li>
                            <li><a class="right"></a></li>
                        </ul>
                        </div>
                        <div class="played">
                            <ul>
                                <li>
                                    <img src="../assets/img/home/played.jpg">
                                    <a class="active">立即预约</a>
                                </li>
                                <li>
                                    <img src="../assets/img/home/played.jpg">
                                    <a>立即预约</a>
                                </li>
                                <li>
                                    <img src="../assets/img/home/played.jpg">
                                    <a>立即预约</a>
                                </li>
                            </ul>
                        </div>
                        <div class="home-title-B m-top-30">
                            最新公告
                            <a class="more">更多></a>
                        </div>
                        <div class="news">
                            <h2><a>逆水寒陪玩师招募活动开启！火速报名</a></h2>
                            <ul>
                                <li>
                                    <a>陪玩会员认证管理规定通知<span>09-10</span></a>
                                </li>
                                <li>
                                    <a>关于陪玩接单过程中的行为规定<span>09-10</span></a>
                                </li>
                                <li>
                                    <a>简单约玩平台APP端上线公告<span>09-10</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- first-floor  end -->

                <!-- scd-floor begin-->
                <div class="home-layout-A m-top-70">
                    <div class="home-layout-A-left">
                        <div class="home-title-A">
                            为您推荐
                        </div>

                        <div class="recommend-list">
                            <ul>
                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-1.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-2.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-3.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-4.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-5.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-6.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="home-layout-A-right">
                        <ul class="wealth-charm">
                            <li><a class="active">财富榜</a></li>
                            <li><a>魅力榜</a></li>
                        </ul>
                        <div class="wealth-list">
                            <div class="top-three">
                                <ul>
                                    <li>
                                        <div class="top-three-B">
                                            <img src="../assets/img/home/top-three-userA.jpg">
                                        </div>
                                        <h2 class="name">瓦克五</h2>
                                        <p class="GX">贡献值:500</p>
                                    </li>

                                    <li>
                                        <div class="top-three-A">
                                            <img src="../assets/img/home/top-three-userA.jpg">
                                        </div>
                                        <h2 class="name">瓦克五</h2>
                                        <p class="GX">贡献值:500</p>
                                    </li>

                                    <li>
                                        <div class="top-three-C">
                                            <img src="../assets/img/home/top-three-userA.jpg">
                                        </div>
                                        <h2 class="name">瓦克五</h2>
                                        <p class="GX">贡献值:500</p>
                                    </li>
                                </ul>
                            </div>

                            <ul class="ranking-list">
                                <li>
                                    <div class="ranking">
                                        <p>4</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="ranking">
                                        <p>5</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="ranking">
                                        <p>6</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="ranking">
                                        <p>7</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>


                                <li>
                                    <div class="ranking">
                                        <p>8</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>


                                <li>
                                    <div class="ranking">
                                        <p>9</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>


                                <li>
                                    <div class="ranking">
                                        <p>10</p>
                                    </div>
                                    <div class="ranking-user">
                                        <img src="../assets/img/home/top-three-userA.jpg">
                                    </div>
                                    <div class="ranking-stu">
                                        <label class="name">孤岛上眺望</label>
                                        <label class="tag">潜行、动作、射击游戏爱好者</label>
                                    </div>
                                    <div class="ranking-numb">
                                        <p>献值:400</p>
                                    </div>
                                </li>


                            </ul>
                        </div>

                    </div>
                </div>
                <!-- scd-floor end-->
            </div>

            <!-- optimization begin -->
            <div class="optimization">
                <ul>
                    <li>
                        <img src="../assets/img/home/optimization1.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/home/optimization2.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/home/optimization3.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/home/optimization4.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/home/optimization5.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/home/optimization6.jpg">
                        <div class="shade"></div>
                        <div class="optimization-sta">
                            <h2>爱搞事的小秋秋</h2>
                            <p>爱好创作的随性设计师</p>
                            <i>19</i>
                        </div>
                    </li>
                </ul>
                <div class="main">
                    <a class="last"></a>
                    <a class="next"></a>
                </div>
            </div>
            <!-- optimization enf -->

            <div class="bg-white">
                <div class="main">
                    <!-- three-floor begin  -->
                    <div class="home-layout-B m-top-70">
                        <div class="home-layout-B-left">
                            <img src="../assets/img/home/LOL.jpg">
                            <div class="home-layout-B-title blue">
                                英雄联盟
                                <a class="more">更多></a>
                            </div>
                            <div class="on-line">
                                <span>在线32人</span>
                            </div>
                            <ul class="tag">
                                <li>
                                    <a>PDD</a>
                                </li>
                                <li>
                                    <a>若风</a>
                                </li>
                                <li>
                                    <a>小苍</a>
                                </li>
                                <li>
                                    <a>虎神</a>
                                </li>
                                <li>
                                    <a>张嘉文</a>
                                </li>
                                <li>
                                    <a>君克</a>
                                </li>
                                <li>
                                    <a>Rookie</a>
                                </li>
                                <li>
                                    <a>MLXG</a>
                                </li>
                                <li>
                                    <a>小虎</a>
                                </li>
                                <li>
                                    <a>声甜貌美</a>
                                </li>
                                <li>
                                    <a>颜值担当</a>
                                </li>
                                <li>
                                    <a>君克</a>
                                </li>
                            </ul>
                        </div>
                        <div class="home-layout-B-right">
                            <div class="recommend-list">
                                <ul>
                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-1.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-2.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-3.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-4.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-5.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-6.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- three-floor end  -->
                </div>
            </div>


            <div class="main p-b-70">
                <!-- four-floor begin  -->
                <div class="home-layout-B m-top-70">
                    <div class="home-layout-B-left bg-new-white">
                        <img src="../assets/img/home/PUBG.jpg">
                        <div class="home-layout-B-title yellow">
                            绝地求生
                            <a class="more">更多></a>
                        </div>
                        <div class="on-line">
                            <span>在线32人</span>
                        </div>
                        <ul class="tag">
                            <li>
                                <a>PDD</a>
                            </li>
                            <li>
                                <a>若风</a>
                            </li>
                            <li>
                                <a>小苍</a>
                            </li>
                            <li>
                                <a>虎神</a>
                            </li>
                            <li>
                                <a>张嘉文</a>
                            </li>
                            <li>
                                <a>君克</a>
                            </li>
                            <li>
                                <a>Rookie</a>
                            </li>
                            <li>
                                <a>MLXG</a>
                            </li>
                            <li>
                                <a>小虎</a>
                            </li>
                            <li>
                                <a>声甜貌美</a>
                            </li>
                            <li>
                                <a>颜值担当</a>
                            </li>
                            <li>
                                <a>君克</a>
                            </li>
                        </ul>
                    </div>
                    <div class="home-layout-B-right">
                        <div class="recommend-list">
                            <ul>
                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-1.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-2.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-3.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-4.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-5.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-6.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!-- four-floor end  -->
            </div>

            <div class="bg-white">
                <div class="main">
                    <!-- five-floor begin  -->
                    <div class="home-layout-B m-top-70">
                        <div class="home-layout-B-left">
                            <img src="../assets/img/home/WZNY.jpg">
                            <div class="home-layout-B-title purple">
                                王者荣耀
                                <a class="more">更多></a>
                            </div>
                            <div class="on-line">
                                <span>在线32人</span>
                            </div>
                            <ul class="tag">
                                <li>
                                    <a>PDD</a>
                                </li>
                                <li>
                                    <a>若风</a>
                                </li>
                                <li>
                                    <a>小苍</a>
                                </li>
                                <li>
                                    <a>虎神</a>
                                </li>
                                <li>
                                    <a>张嘉文</a>
                                </li>
                                <li>
                                    <a>君克</a>
                                </li>
                                <li>
                                    <a>Rookie</a>
                                </li>
                                <li>
                                    <a>MLXG</a>
                                </li>
                                <li>
                                    <a>小虎</a>
                                </li>
                                <li>
                                    <a>声甜貌美</a>
                                </li>
                                <li>
                                    <a>颜值担当</a>
                                </li>
                                <li>
                                    <a>君克</a>
                                </li>
                            </ul>
                        </div>
                        <div class="home-layout-B-right">
                            <div class="recommend-list">
                                <ul>
                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-1.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-2.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-3.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-4.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-5.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a>
                                            <div class="recommend-img">
                                                <img src="../assets/img/home/recommend-6.jpg">
                                                <label>
                                                    <span class="tip1">声甜貌美</span>
                                                    <span class="tip2">颜值担当</span>
                                                </label>
                                            </div>
                                            <div class="recommend-view">
                                                <div class="recommend-view-title">
                                                    <img src="../assets/img/home/recommend-user.jpg">
                                                    <span>真爱迷妹小迷妹</span>
                                                </div>
                                                <div class="recommend-view-msg">
                                                    <i class="she">20</i>
                                                    <label class="price">￥<span>35/</span>小时</label>
                                                </div>
                                                <div class="recommend-view-status">
                                                    <label class="game">英雄联盟</label>
                                                    <label class="ok">在线</label>
                                                </div>
                                            </div>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- five-floor end  -->
                </div>
            </div>

            <div class="main p-b-70">
                <!-- four-floor begin  -->
                <div class="home-layout-B m-top-70">
                    <div class="home-layout-B-left bg-new-white">
                        <img src="../assets/img/home/CJZC.jpg">
                        <div class="home-layout-B-title new-yellow">
                            刺激战场
                            <a class="more">更多></a>
                        </div>
                        <div class="on-line">
                            <span>在线32人</span>
                        </div>
                        <ul class="tag">
                            <li>
                                <a>PDD</a>
                            </li>
                            <li>
                                <a>若风</a>
                            </li>
                            <li>
                                <a>小苍</a>
                            </li>
                            <li>
                                <a>虎神</a>
                            </li>
                            <li>
                                <a>张嘉文</a>
                            </li>
                            <li>
                                <a>君克</a>
                            </li>
                            <li>
                                <a>Rookie</a>
                            </li>
                            <li>
                                <a>MLXG</a>
                            </li>
                            <li>
                                <a>小虎</a>
                            </li>
                            <li>
                                <a>声甜貌美</a>
                            </li>
                            <li>
                                <a>颜值担当</a>
                            </li>
                            <li>
                                <a>君克</a>
                            </li>
                        </ul>
                    </div>
                    <div class="home-layout-B-right">
                        <div class="recommend-list">
                            <ul>
                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-1.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-2.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-3.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-4.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-5.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a>
                                        <div class="recommend-img">
                                            <img src="../assets/img/home/recommend-6.jpg">
                                            <label>
                                                <span class="tip1">声甜貌美</span>
                                                <span class="tip2">颜值担当</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <img src="../assets/img/home/recommend-user.jpg">
                                                <span>真爱迷妹小迷妹</span>
                                            </div>
                                            <div class="recommend-view-msg">
                                                <i class="she">20</i>
                                                <label class="price">￥<span>35/</span>小时</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">英雄联盟</label>
                                                <label class="ok">在线</label>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!-- four-floor end  -->
            </div>
        </div>
        <footerCom></footerCom>
    </div>
</template>
<script>
import footerCom from '@/components/footerCom'
export default {
    data(){
        return{
            
        }
    },
    created(){       
               
    },
    methods:{
       
    },
    components: {
        footerCom
    },
    mounted(){
        
    }
}
</script>

<style>
@import "../assets/css/Login.css";
@import "../assets/css/reset.css";
@import "../assets/css/layout.css";
@import "../assets/css/top3.css";
@import "../assets/css/footer.css";
@import "../assets/css/home.css";
</style>